<template>
  <div>
    <div class="main">
      <Header></Header>
      <SearchIcon style="background-color: white"></SearchIcon>
      <div class="ys-shopCart-title">
        <span id="shopCartdesc">购物车 (全部)</span>
        <h5 id="choose-shop">已选商品 {{ opts.length }} 件</h5>
        <span id="shop-total-money">{{ totalPrice }}</span>
        <el-button id="total-btn" @click="gotoOrderAdd">结 算</el-button>
      </div>
      <div class="shopCart-list">
        <div class="shopCart-list-choice">
          <input type="checkbox" id="all"> <h5 id="choose-all">全选</h5>
          <h5 id="one">商品信息</h5>
          <h5 id="tow">单价</h5>
          <h5 id="three">数量</h5>
          <h5 id="four">金额</h5>
          <h5 id="five">操作</h5>
        </div>
        <ul class="ys-shopCart-list-all-choice" v-for="(c,index) in this.shopCartList" :key="index">
          <li>
            <input type="checkbox" id="index" :value="index" v-model="opts">
            <div class="shopCart-more-info">
              <img :src="getUrl(c.url)" alt=""
                   style="width: 80px;height: 80px;border: 1px solid black;margin-top: 30px;margin-left: 50px;cursor: pointer" @click="this.toIntroductionShop(c.productId,c.buinessName)">
              <a id="desc" style="cursor: pointer" @click="this.toIntroductionShop(c.productId,c.buinessName)">{{ c.productName }}
              </a>
              <p class="color">{{ c.skuProps }}</p>
              <del id="price">￥{{ c.originalPrice * c.cartNum }}</del>
              <h5 id="price-after">￥{{ c.sellPrice * c.cartNum }}</h5>
              <el-input-number :min="1" v-model="c.cartNum" :max="10"
                               style="margin-top: 28px;margin-left: 615px;position: absolute;width: 100px;"
                               @change="changeCartNum($event,c.cartId)" :data-index="index"/>
              <h5 id="sure-price">￥{{ c.sellPrice * c.cartNum }}</h5>
              <a id="delete" style="cursor: pointer" @click=" deleteCart(c.cartId)">删除</a>
              <a id="collection" style="cursor: pointer;margin-top: -50px" @click="getCollectionShop(c.productId,c.skuId,c.cartNum,c.sellPrice,c.skuProps,c.url,c.productName,c.buinessName)">移入收藏夹</a>
            </div>
          </li>
        </ul>
      </div>
      <EndOfhtml></EndOfhtml>
      <LoginFooter></LoginFooter>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
import SearchIcon from "../components/SearchIcon";
import LoginFooter from "../components/LoginFooter";
import EndOfhtml from "../components/EndOfhtml";
import {publicFun} from "../mixin";

export default {
  name: "shopCart",
  components: {
    Header, SearchIcon, LoginFooter, EndOfhtml
  },
  data() {
    return {
      token: "",
      shopCartList: [],
      shopCartSku: [],
      shopCarSkuMap: [],
      currentSkuIndex: null,
      opts: [],
      totalPrice: 0.00,
      userId:null
    }
  },
  watch: {
    opts: function () {
      this.totalPrice = 0;
      for (var i = 0; i < this.opts.length; i++) {
        var index = this.opts[i];//index就是选择的购物车记录的索引
        this.totalPrice = this.totalPrice + this.shopCartList[index].cartNum * this.shopCartList[index].sellPrice;
      }
    }
  },
  methods: {
    getCollectionShop(productId,skuId,cartNum,sellPrice,skuProps,url,productName,buinessName){
      var collectionShop={
        "productId":productId,
        "skuId":skuId,
        "userId":this.userId,
        "cartNum":cartNum,
        "productPrice":sellPrice,
        "skuProps":skuProps,
        "url":url,
        "productName":productName,
        "buinessName":buinessName
      }
      console.log(buinessName)
      this.userId = this.getCookieValue("userId")
      this.$axios({
          url:'api/CollectionService/putlist',
          method:'post',
          data:collectionShop
        }).then((res)=>{
          console.log(res)
      })
    },
    getlist() {
      this.token = this.getCookieValue("token");
      this.userId = this.getCookieValue("userId");
      this.$axios.get('api/shopCart/mycartList', {
        headers: {
          token: this.token
        },
        params: {
          userId: this.userId
        }
      }).then((res) => {
        if (res.data.code == 201) {
          this.shopCartList = res.data.data;
          // console.log(this.shopCartList)
          for (var i = 0; i < this.shopCartList.length; i++) {
            this.shopCartSku[i] = this.shopCartList[i].skuProps;
          }
        } else {
          this.$router.push({path: '/ysLogin'})
        }
      })
    },
    getUrl(name) {
      return require("../assets/img/" + name + ".jpg");
    },
    changeCartNum(val, cartId) {
      var cnum = val;
      var cid = cartId;
      this.token = this.getCookieValue("token");
      this.$axios({
        url: 'api/shopCart/updateCart/' + cid + '/' + cnum,
        method: "put",
        headers: {
          token: this.token,
        }
      }).then((res) => {
        if (res.data.code == 201) {
          this.totalPrice = 0;
          for (var i = 0; i < this.opts.length; i++) {
            var index = this.opts[i];//index就是选择的购物车记录的索引
            this.totalPrice = this.totalPrice + this.shopCartList[index].cartNum * this.shopCartList[index].sellPrice;
          }
        }
      })
    },
    deleteCart(cartId) {
      var cid = cartId;
      this.token = this.getCookieValue("token");
      this.$axios({
        url: 'api/shopCart/deleteCart',
        method: "delete",
        headers: {
          token: this.token
        },
        params: {
          cartId: cid
        }
      })
    },
    gotoOrderAdd() {
      //获取选择购物车记录\
      if (this.opts.length == 0) {
        alert("请选择要购买的商品")
      } else {
        var cids = "";
        for (var i = 0; i < this.opts.length; i++) {
          var index = this.opts[i];
          var carId = this.shopCartList[index].cartId;
          if (i < this.opts.length - 1) {
            cids = cids + carId + ",";
          } else {
            cids = cids + carId;
          }
        }
        this.$router.push({path: 'api//payForShop', query: {cids: cids}})
      }
    }
  },
  mounted() {
    //当进入购物页面时 请求购物车列表
    this.getlist()
  },
  updated() {
    this.getlist()
  },
  mixins: [publicFun],
}
</script>
<style scoped>
#delete,#collection{
  display: block;
  position: absolute;
  margin-left: 1040px;
  text-decoration: none;
  margin-top: -80px;
  color: black;
  font-family: 新宋体;
  font-size: 15px;
}
#collection:hover{
  color: #01ccb3;
}
#delete:hover {
  color: #01ccb3;
}

#sure-price {
  position: absolute;
  margin-left: 895px;
  margin-top: -80px;
  color: #01ccb3;
}

#price-after {
  position: absolute;
  margin-left: 638px;
  margin-top: -75px;
}

#price {
  position: absolute;
  margin-top: 25px;
  margin-left: 510px;
  font-size: 12px;
  color: #727070;
}

.color {
  position: absolute;
  margin-left: 400px;
  font-size: 10px;
  font-family: 新宋体;
  margin-top: -85px;
  color: #727070;
}

#desc {
  display: inline-block;
  width: 200px;
  height: auto;
  font-size: 10px;
  text-decoration: none;
  color: black;
  font-family: 新宋体;
  margin-left: 5px;
  position: absolute;
  margin-top: 30px;
}

#desc:hover {
  color: #01ccb3;
}

#index {
  margin-left: 10px;
}

.shopCart-more-info {
  width: 1150px;
  height: 140px;
  /*border: 1px solid black;*/
  border-radius: 20px;
  background-color: rgba(245, 245, 245, 0.56);
}

.ys-shopCart-list-all-choice > li {
  width: 1190px;
  height: 180px;
  /*border: 1px solid black;*/
}

.ys-shopCart-list-all-choice {
  display: block;
  list-style: none;
}

#five {
  display: inline-block;
  margin-left: 100px;
}

#four {
  display: inline-block;
  margin-left: 100px;

}

#three {
  display: inline-block;
  margin-left: 100px;
}

#tow {
  display: inline-block;
  margin-left: 440px;
}

#one {
  display: inline-block;
  margin-left: 100px;
}

#choose-all {
  display: inline-block;
  margin-left: 5px;
  font-size: 15px;
  /*font-weight: 400;*/
  font-family: 新宋体;
}

#all {
  margin-top: 20px;
  margin-left: 30px;
  color: rgba(171, 171, 171, 0.18);
}

.shopCart-list-choice {
  width: 1190px;
  height: 60px;
  /*border: 1px solid black;*/
  overflow: hidden;
}

.shopCart-list {
  width: 1190px;
  height: auto;
  background-color: white;
}

#total-btn {
  width: 70px;
  height: 45px;
  margin-left: 20px;
  margin-top: -7px;
  border-radius: 20px;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
  color: white;
  border: none;
  font-size: 16px;
  font-family: 新宋体;
}

#total-btn:hover {
  background-color: #0075bd;
  border: none;
}

#shop-total-money {
  margin-left: 10px;
  font-size: 25px;
  color: #01c78a;
}

#choose-shop {
  display: inline-block;
  margin-left: 800px;
  font-weight: 400;
  font-size: 15px;
}

#shopCartdesc {
  font-size: 18px;
  line-height: 80px;
  margin-left: 20px;
  font-weight: 700;
}

.main {
  background-color: rgba(220, 220, 220, 0.21);
}

.ys-shopCart-title {
  margin-top: 30px;
  width: 1190px;
  height: 80px;
  /*border: 1px solid black;*/
  border-radius: 20px 20px 0 0;
  background-color: white;
}
</style>